<template>
  <div>
    <div class="head">
      <a @click="back" class="return"></a>
      {{$t('PropertyCrowdfunding.v1')}}
      <span style="position: absolute;right: 0;top: 3px;width: 45px;height: 45px;z-index: 99;" @click="forMy">
        <van-icon name="contact" size="22"/>
      </span>
    </div>
    <div class="overlay">
      <div class="overlay-content scrolling">
        <van-tabs v-model="active" swipeable>
          <van-tab :title="$t('PropertyCrowdfunding.v2')" name="1">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" ">
              <van-list v-model="loading" :finished="finished" @load="onLoad"
                        :finished-text="'————      ' +$t('PropertyCrowdfunding.v3')+ '     ————'">
                <div style="padding: 10px;background: white;margin-bottom: 10px;"
                     @click="$router.push({path: '/PropertyDetails',query:{roid: 'PropertyCrowdfunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index">
                  <van-image width="100%" height="100%" :src="item.picture"/>
                  <div style="padding: 10px 0px;">
                    <span v-text="item.title">汤臣一品一栋二号楼70平方</span>
                    <span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
                    <span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
                  </div>
                  <div style="padding: 10px 0px;">
                    <van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b"/>
                    <van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
                  </div>
                  <div style="padding: 10px 0px;font-size: 12px;">
                    <span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
                    <span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
                    <span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab :title="$t('PropertyCrowdfunding.v4')" name="2">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" ">
              <van-list v-model="loading" :finished="finished" @load="onLoad"
                        :finished-text="'————      ' +$t('PropertyCrowdfunding.v3')+ '     ————'">
                <div style="padding: 10px;background: white;margin-bottom: 10px;"
                     @click="$router.push({path: '/PropertyDetails',query:{roid: 'PropertyCrowdfunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index" v-if="item.status == 1">
                  <van-image width="100%" height="100%" :src="item.picture"/>
                  <div style="padding: 10px 0px;">
                    <span v-text="item.title">汤臣一品一栋二号楼70平方</span>
                    <span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
                    <span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
                  </div>
                  <div style="padding: 10px 0px;">
                    <van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b"/>
                    <van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
                  </div>
                  <div style="padding: 10px 0px;font-size: 12px;">
                    <span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
                    <span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
                    <span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </van-tab>
          <van-tab :title="$t('PropertyCrowdfunding.v8')" name="3">
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh" pulling-text=" ">
              <van-list v-model="loading" :finished="finished" @load="onLoad"
                        :finished-text="'————      ' +$t('PropertyCrowdfunding.v3')+ '     ————'">
                <div style="padding: 10px;background: white;margin-bottom: 10px;"
                     @click="$router.push({path: '/PropertyDetails',query:{roid: 'PropertyCrowdfunding',projectId: item.projectId}})" v-for="(item,index) in list" :key="item.index" v-if="item.status == 2">
                  <van-image width="100%" height="100%" :src="item.picture"/>
                  <div style="padding: 10px 0px;">
                    <span v-text="item.title">汤臣一品一栋二号楼70平方</span>
                    <span style="float: right;font-size: 13px;color: #22a77b;" v-if="item.status == 1">{{$t('PropertyCrowdfunding.v4')}}</span>
                    <span style="float: right;font-size: 13px;color: #f94951;" v-if="item.status == 2">{{$t('PropertyCrowdfunding.v5')}}</span>
                  </div>
                  <div style="padding: 10px 0px;">
                    <van-progress v-if="item.ratio" :percentage="Number(parseFloat(Number(item.ratio * 100)).toFixed(3).slice(0,-1))" color="#22a77b"/>
                    <van-progress v-if="!item.ratio" :percentage="0" color="#22a77b" />
                  </div>
                  <div style="padding: 10px 0px;font-size: 12px;">
                    <span style="color:#22a77b;" v-text="parseFloat(item.pay).toFixed(5).slice(0,-1)">100</span>
                    <span>{{$t('PropertyCrowdfunding.v12')}}USDT{{$t('PropertyCrowdfunding.v6')}}</span>
                    <span style="float: right;" v-text="$t('PropertyCrowdfunding.v7') + item.validTotal + '人'">已参与1000人</span>
                  </div>
                </div>
              </van-list>
            </van-pull-refresh>
          </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script>
    import {crowdfunding} from './../../utils/api';
    export default {
        name: "PropertyCrowdfunding",
        data() {
            return {
                list: [],
                active: 1,
                size: 10, //每页数量
                current: 1,
                total: '', //总数量
                listLength: '', //当前总数量
                isLoading: false,
                finished: false,
                loading: false
            }
        },
        mounted() {

        },
        methods: {
            getList() {
                crowdfunding.getProject({
                    type: 0, // 类型：0 全部 1进行中 2已结束
                    current: this.current,
                    size: this.size
                }).then(res => {
                    if(res.code == 200) {
                        this.list = res.data.records;
                        this.listLength = res.data.records.length;
                        this.total = res.data.total;
                        if (this.total > this.listLength) {
                            this.size += 10;
                            this.loading = false;
                        } else {
                            // 加载状态结束
                            this.finished = true;
                            this.loading = false;
                        }
                    }
                })
            },
            onRefresh() { // 下拉刷新
                this.getList();
                setTimeout(() => {
                    this.$toast({
                        duration: 800,
                        message: this.$t('Prize.v23')
                    });
                    this.isLoading = false;
                }, 500);
            },
            onLoad() { // 上拉加载
                this.getList();
            },
            back() {
                if (this.$route.query.roid) {
                    this.$router.push({
                        path: this.$route.query.roid
                    })
                } else {
                    this.$router.push({
                        path: '/'
                    })
                }
            },
            forMy() { // 前往我的项目和我的分红页面
                this.$router.push({
                    path: '/ForMy'
                });
            }
        },
        filters: {}
    }
</script>

<style lang="less" scoped>
  .overlay {
    background: rgb(245, 245, 245);
  }

  .head {
    background: white;
    color: black;
  }

  .head .return:after {
    border-color: #000;
  }

  /deep/ .van-tab__pane, .van-tab__pane-wrapper {
    color: black;
  }

  /deep/ .van-tabs__line {
    background-color: rgb(60, 167, 109);
  }

  /deep/ .van-list__finished-text {
    padding-bottom: 10px;
  }
</style>
